<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Grids</h3>
</div>
<div class="p-md">
  <h5 class="no-margin m-b">Stacked-to-horizontal</h5>
  <div class="row">
    <div class="col-md-2"><div class="panel p">.col-md-2</div></div>
    <div class="col-md-2"><div class="panel p">.col-md-2</div></div>
    <div class="col-md-2"><div class="panel p">.col-md-2</div></div>
    <div class="col-md-2"><div class="panel p">.col-md-2</div></div>
    <div class="col-md-2"><div class="panel p">.col-md-2</div></div>
    <div class="col-md-2"><div class="panel p">.col-md-2</div></div>
  </div>
  <div class="row">
    <div class="col-md-8"><div class="panel p">.col-md-8</div></div>
    <div class="col-md-4"><div class="panel p">.col-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-md-4"><div class="panel p">.col-md-4</div></div>
    <div class="col-md-4"><div class="panel p">.col-md-4</div></div>
    <div class="col-md-4"><div class="panel p">.col-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-md-6"><div class="panel p">.col-md-6</div></div>
    <div class="col-md-6"><div class="panel p">.col-md-6</div></div>
  </div>
  <h5 class="no-margin m-b">Mobile and desktop</h5>
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-xs-12 col-md-8"><div class="panel p">.col-xs-12 .col-md-8</div></div>
    <div class="col-xs-6 col-md-4"><div class="panel p">.col-xs-6 .col-md-4</div></div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-xs-6 col-md-4"><div class="panel p">.col-xs-6 .col-md-4</div></div>
    <div class="col-xs-6 col-md-4"><div class="panel p">.col-xs-6 .col-md-4</div></div>
    <div class="col-xs-6 col-md-4"><div class="panel p">.col-xs-6 .col-md-4</div></div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-xs-6"><div class="panel p">.col-xs-6</div></div>
    <div class="col-xs-6"><div class="panel p">.col-xs-6</div></div>
  </div>

  <h5 class="no-margin m-b">Mobile, tablet, desktops</h5>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8"><div class="panel p">.col-xs-12 .col-sm-6 .col-md-8</div></div>
    <div class="col-xs-6 col-md-4"><div class="panel p">.col-xs-6 .col-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4"><div class="panel p">.col-xs-6 .col-sm-4</div></div>
    <div class="col-xs-6 col-sm-4"><div class="panel p">.col-xs-6 .col-sm-4</div></div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4"><div class="panel p">.col-xs-6 .col-sm-4</div></div>
  </div>

  <h5 class="no-margin m-b">Offsetting columns</h5>
  <div class="row">
    <div class="col-md-4"><div class="panel p">.col-md-4</div></div>
    <div class="col-md-4 col-md-offset-4"><div class="panel p">.col-md-4 .col-md-offset-4</div></div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3"><div class="panel p">.col-md-3 .col-md-offset-3</div></div>
    <div class="col-md-3 col-md-offset-3"><div class="panel p">.col-md-3 .col-md-offset-3</div></div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3"><div class="panel p">.col-md-6 .col-md-offset-3</div></div>
  </div>
  
  <h5 class="no-margin m-b">Column ordering</h5>
  <div class="row">
    <div class="col-md-9 col-md-push-3"><div class="panel p">.col-md-9 .col-md-push-3</div></div>
    <div class="col-md-3 col-md-pull-9"><div class="panel p">.col-md-3 .col-md-pull-9</div></div>
  </div>

  <h3>Grid options</h3>
  <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped bg-white">
      <thead>
        <tr>
          <th></th>
          <th>
            Extra small devices
            <small>Phones (&lt;768px)</small>
          </th>
          <th>
            Small devices
            <small>Tablets (≥768px)</small>
          </th>
          <th>
            Medium devices
            <small>Desktops (≥992px)</small>
          </th>
          <th>
            Large devices
            <small>Desktops (≥1200px)</small>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="text-nowrap">Grid behavior</th>
          <td>Horizontal at all times</td>
          <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
        </tr>
        <tr>
          <th class="text-nowrap">Container width</th>
          <td>None (auto)</td>
          <td>750px</td>
          <td>970px</td>
          <td>1170px</td>
        </tr>
        <tr>
          <th class="text-nowrap">Class prefix</th>
          <td><code>.col-xs-</code></td>
          <td><code>.col-sm-</code></td>
          <td><code>.col-md-</code></td>
          <td><code>.col-lg-</code></td>
        </tr>
        <tr>
          <th class="text-nowrap"># of columns</th>
          <td colspan="4">12</td>
        </tr>
        <tr>
          <th class="text-nowrap">Column width</th>
          <td class="text-muted">Auto</td>
          <td>~62px</td>
          <td>~81px</td>
          <td>~97px</td>
        </tr>
        <tr>
          <th class="text-nowrap">Gutter width</th>
          <td colspan="4">30px (15px on each side of a column)</td>
        </tr>
        <tr>
          <th class="text-nowrap">Nestable</th>
          <td colspan="4">Yes</td>
        </tr>
        <tr>
          <th class="text-nowrap">Offsets</th>
          <td colspan="4">Yes</td>
        </tr>
        <tr>
          <th class="text-nowrap">Column ordering</th>
          <td colspan="4">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>